<template>
    <div class="divbody">
        <div class="foundation">

            <h3
                style="text-align: center;line-height: 50px;  margin-bottom: 0px; height: 50px; background-color: rgb(95, 178, 245);">
                基础信息(可更改)</h3>
            <form :model="userInfoRefModel">
                <table border="1" class="info-table basic" width="100%">
                    <tbody>
                        <tr height="50px">
                            <td width="15%" style="text-align: right;"><label for="username">姓名</label></td>
                            <td style="text-align: left;"><input v-model="userInfoRefModel.username" id="username"
                                    name="username" /></td>
                            <td width="15%" style="text-align: right;"><label for="phoneNumber">手机号</label></td>
                            <td style="text-align: left;"><input v-model="userInfoRefModel.phoneNumber" id="phoneNumber"
                                    name="phoneNumber" /></td>
                            <td width="15%" style="text-align: right;"><label for="birthday">生日</label></td>
                            <td style="text-align: left;"><input type="date" v-model="userInfoRefModel.birthday"
                                    id="birthday" name="birthday" /></td>
                        </tr>
                        <tr height="50px">
                            <td width="15%" style="text-align: right;"><label for="nativePlace">籍贯</label></td>
                            <td style="text-align: left;"><input v-model="userInfoRefModel.nativePlace" id="nativePlace"
                                    name="nativePlace" /></td>



                            <td width="15%" style="text-align: right;"><label for="nation">民族</label></td>
                            <td style="text-align: left;">
                                <!-- <input v-model="userInfoRefModel.nation" id="nation"
                                    name="nation" /> -->

                                <el-select v-model="userInfoRefModel.nation" placeholder="Select" size="large"
                                    style="width: 235px">
                                    <el-option v-for="item in nations" :key="item.value" :label="item.label"
                                        :value="item.label" />
                                </el-select>

                            </td>





                            <td width="15%" style="text-align: right;"><label for="marriage">婚姻状况</label></td>
                            <td style="text-align: left;"><input v-model="userInfoRefModel.marriage" id="marriage"
                                    name="marriage" /></td>
                        </tr>
                        <tr height="50px">
                            <td width="15%" style="text-align: right;"><label for="joinPartyDate">入党时间</label></td>
                            <td style="text-align: left;"><input type="date" v-model="userInfoRefModel.joinPartyDate"
                                    id="joinPartyDate" name="joinPartyDate" /></td>
                            <td width="15%" style="text-align: right;"><label for="idCard">身份证号</label></td>
                            <td style="text-align: left;"><input v-model="userInfoRefModel.idCard" id="idCard"
                                    name="idCard" /></td>
                            <td width="15%" style="text-align: right;"><label for="email">邮箱</label></td>
                            <td style="text-align: left;"><input v-model="userInfoRefModel.email" id="email"
                                    name="email" />
                            </td>
                        </tr>
                        <tr height="50px">
                            <td width="15%" style="text-align: right;"><label for="gender">性别</label></td>
                            <td style="text-align: left;">
                                <!-- 假设这是一个单选按钮组 -->
                                <label><input type="radio" v-model="userInfoRefModel.gender" value="m" id="genderMale"
                                        name="gender" /> 男</label>
                                <label><input type="radio" v-model="userInfoRefModel.gender" value="f" id="genderFemale"
                                        name="gender" /> 女</label>
                            </td>

                            <td width="15%" style="text-align: right;"><label for="degreeEducation">学历</label></td>
                            <td style="text-align: left;">
                                <!-- <input v-model="userInfoRefModel.degreeEducation"
                                    id="degreeEducation" name="degreeEducation" /> -->
                                <el-select v-model="userInfoRefModel.degreeEducation" placeholder="Select" size="large"
                                    style="width: 235px">
                                    <el-option v-for="item in degreeEducations" :key="item.value" :label="item.label"
                                        :value="item.label" />
                                </el-select>
                            </td>


                            <td width="15%" style="text-align: right;">
                                <label for="politicalOutlook">政治面貌</label>
                            </td>
                            <td style="text-align: left;">
                                <el-select v-model="userInfoRefModel.politicalOutlook" placeholder="Select" size="large"
                                    style="width: 235px">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.label" />
                                </el-select>
                            </td>





                        </tr>


                    </tbody>

                </table>
                <div style="height: 10px;"></div>
                <div style="display: flex; width: 100%; ">
                    <div style="width: 20%;"></div>
                    <div style="width: 60%; display: flex;  justify-content: center;">
                        <el-button style="width: 150px;" type="warning" plain
                            @click="dialogVisibleModify = true">提交修改</el-button>
                        <div style="width: 50px;"></div>
                        <el-button style="width: 150px;" type="primary" plain
                            @click="userInfoRefModelDefaultFun">恢复默认</el-button>
                        <el-dialog v-model="dialogVisibleModify" title="Tips" width="500">
                            <span>确认要提交修改？</span>
                            <template #footer>
                                <div class="dialog-footer">
                                    <el-button @click="dialogVisibleModify = false">取消</el-button>

                                    <el-button type="primary" @click="updateUserById">提交</el-button>
                                </div>
                            </template>
                        </el-dialog>
                    </div>
                    <div style="width: 20%; padding-top: 8px;color: red;">个人信息很重要请谨慎修改!!!</div>



                </div>
                <div style="height: 10px;"></div>
            </form>
        </div>



        <div class="department">

            <h3
                style="text-align: center;line-height: 50px;  margin-bottom: 0px; height: 50px; background-color: rgb(95, 178, 245);">
                部门信息(不可更改)</h3>
            <table border="1" class="info-table" width="100%">
                <tbody>
                    <tr height="50px" v-for="(item, index) in groupedRegularData" :key="index">
                        <td width="15%" style="text-align: right;">{{ item[0]?.key || '' }}:</td>
                        <td style="text-align: left;">{{ item[0]?.value || '' }}</td>
                        <td width="15%" style="text-align: right;">{{ item[1]?.key || '' }}:</td>
                        <td style="text-align: left;">{{ item[1]?.value || '' }}</td>
                        <td width="15%" style="text-align: right;">{{ item[2]?.key || '' }}:</td>
                        <td style="text-align: left;">{{ item[2]?.value || '' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed, reactive } from 'vue';
import useUserStore from '@/store/modules/user'
import { getUser, updateUser } from '@/api/personal/user'
import { updateUserProfile } from "@/api/system/user";
import { ElMessageBox } from 'element-plus'
const dialogVisibleModify = ref(false)




const userStore = useUserStore()
onMounted(() => {
    getUserById()
})


const userInfoRef = ref({})
const userInfoRefModel = ref({})
const formsysuser = ref({});
//发送请求获取数据
function getUserById() {
    getUser(userStore.id).then(res => {
        if (res.code == 200) {
            console.log(res.data)
            userInfoRef.value = { ...res.data }
            userInfoRefModel.value = { ...res.data }
        }
    });
}
//修改基础信息
function updateUserById() {
    updateUser(JSON.stringify({ ...userInfoRefModel.value })).then(res => {



        formsysuser.value = {
            phonenumber: userInfoRefModel.value.phoneNumber, 
            email: userInfoRefModel.value.email,
            userName: userInfoRefModel.value.numid,
            sex: userInfoRefModel.value.gender,

        }
        console.log(formsysuser.value);
        updateUserProfile(formsysuser.value).then(response => {
            

        });



        if (res.code == 200) {
            //刷新页面
            getUserById()
            dialogVisibleModify.value = false
            ElMessageBox.alert('修改成功', '提示', {
                confirmButtonText: '确定',
                type: 'success'
            })
        }
    });
}
//第一步把数据拆分位两个ref
// 需要保留的键
const keysForVariable = ['username', 'politicalOutlook', 'phoneNumber', 'nativePlace', 'nation', 'marriage', 'joinPartyDate', 'idCard', 'headPortrait', 'gender', 'email', 'degreeEducation', 'birthday'];
const keysForRegular = ['createdAt', 'departmentName', 'formallyEstablished', 'grade', 'joinWorkDate', 'mainDuties', 'numid', 'personnelClassification', 'updateTime', 'updatedAt'];
// 计算属性：过滤后的数据  可更改属性

// 计算属性：过滤后的数据  不允许更改属性
const keysForRegularData = computed(() => {
    return Object.fromEntries(
        Object.entries(userInfoRef.value).filter(([key]) => keysForRegular.includes(key))
    );
});




//把数据转换位二维数组 便于遍历
const groupedRegularData = computed(() => {
    const entries = Object.entries(translatedRegularRef.value);
    let result = [];
    for (let i = 0; i < entries.length; i += 3) {
        result.push(entries.slice(i, i + 3).map(([key, value]) => ({ key, value })));
    }
    console.log(result);
    return result;
});


// 映射表，英文键名到中文键名
const keyTranslationMap = {
    birthday: "出生日期",
    createBy: "创建者",
    createTime: "创建时间",
    createdAt: "创建日期",
    degreeEducation: "学历",
    departmentName: "部门",
    email: "电子邮件",
    formallyEstablished: "正式建立",
    gender: "性别",
    grade: "等级",
    headPortrait: "头像",
    id: "ID",
    idCard: "身份证号",
    joinPartyDate: "入党日期",
    joinWorkDate: "入职日期",
    mainDuties: "主要职责",
    marriage: "婚姻状况",
    nation: "民族",
    nativePlace: "籍贯",
    numid: "编号",
    personnelClassification: "人员分类",
    phoneNumber: "电话号码",
    politicalOutlook: "政治面貌",
    remark: "备注",
    updateBy: "更新者",
    updateTime: "更新时间",
    updatedAt: "更新时间",
    username: "用户名"
};

// 计算属性，用于转换键名为中文
const translatedRegularRef = computed(() => {
    return Object.entries(keysForRegularData.value).reduce((acc, [key, value]) => {
        acc[keyTranslationMap[key] || key] = value;
        return acc;
    }, {});
});


//重置可更改数据
const userInfoRefModelDefaultFun = () => {
    userInfoRefModel.value = { ...userInfoRef.value };
}



// 政治面貌下拉框数据（暂时使用数组）
const options = [
    { value: 'partyMember', label: '中共党员' },
    { value: 'partyMember', label: '共青团员' },
    { value: 'partyMember', label: '群众' },
    { value: 'partyMember', label: '预备党员' },
    { value: 'democraticParty', label: '民主党派' },
    { value: 'noParty', label: '无党派' },
]
// 民族下拉框数据（暂时使用数组）
const nations = [
    { value: '1', label: '汉族' },
    { value: '2', label: '蒙古族' },
    { value: '3', label: '回族' },
    { value: '4', label: '藏族' },
    { value: '5', label: '维吾尔族' },
    { value: '6', label: '苗族' },
    { value: '7', label: '彝族' },
    { value: '8', label: '壮族' },
    { value: '9', label: '布依族' },
    { value: '10', label: '朝鲜族' },
    { value: '11', label: '满族' },
    { value: '12', label: '侗族' },
    { value: '13', label: '瑶族' },
    { value: '14', label: '白族' },
    { value: '15', label: '土家族' },
    { value: '16', label: '哈尼族' },
    { value: '17', label: '哈萨克族' },
    { value: '18', label: '傣族' },
    { value: '19', label: '黎族' },
    { value: '20', label: '傈僳族' },
    { value: '21', label: '佤族' },
    { value: '22', label: '畲族' },
    { value: '23', label: '高山族' },
    { value: '24', label: '拉祜族' },
    { value: '25', label: '水族' },
    { value: '26', label: '东乡族' },
    { value: '27', label: '纳西族' },
    { value: '28', label: '景颇族' },
    { value: '29', label: '柯尔克孜族' },
    { value: '30', label: '土族' },
    { value: '31', label: '达斡尔族' },
    { value: '32', label: '仫佬族' },
    { value: '33', label: '羌族' },
    { value: '34', label: '布朗族' },
    { value: '35', label: '撒拉族' },
    { value: '36', label: '毛南族' },
    { value: '37', label: '仡佬族' },
    { value: '38', label: '锡伯族' },
    { value: '39', label: '阿昌族' },
    { value: '40', label: '普米族' },
    { value: '41', label: '塔吉克族' },
    { value: '42', label: '怒族' },
    { value: '43', label: '乌孜别克族' },
    { value: '44', label: '俄罗斯族' },
    { value: '45', label: '鄂温克族' },
    { value: '46', label: '德昂族' },
    { value: '47', label: '保安族' },
    { value: '48', label: '裕固族' },
    { value: '49', label: '京族' },
    { value: '50', label: '塔塔尔族' },
    { value: '51', label: '独龙族' },
    { value: '52', label: '鄂伦春族' },
    { value: '53', label: '赫哲族' },
    { value: '54', label: '门巴族' },
    { value: '55', label: '珞巴族' },
    { value: '56', label: '基诺族' },
    // 如果有遗漏或新增的民族，可以在这里继续添加  
];
// 学历下拉框数据（暂时使用数组）
const degreeEducations = [
    { value: 'associate', label: '高职' },
    { value: 'bachelor', label: '本科' },
    { value: 'master', label: '硕士' },
    { value: 'doctor', label: '博士' }
]




</script>

<style scoped>
/* .demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
} */






.divbody {
    /* background-color: antiquewhite; */
    padding: 10px;
    width: 100%;
    height: 100vh;
}

.foundation {
    /* 添加阴影 */
    box-shadow: 4px 4px 5px rgba(53, 53, 53, 0.5);
}

.department {
    /* 添加阴影 */
    box-shadow: 4px 4px 5px rgba(53, 53, 53, 0.5);
}

table {
    border-collapse: collapse;
}

th,
td {
    border: 1px solid rgb(220, 219, 219);
    padding: 0 10px;
    /* 设置边框样式 */
}


table tr:nth-child(odd) {
    background-color: #f2f2f2;
    /* 浅灰色背景，用于奇数行 */
}

table tr:nth-child(even) {
    background-color: #ffffff;
    /* 白色背景，用于偶数行，但这里其实可以省略，因为白色通常是默认背景色 */
}



.basic input {
    /* 去除边框 */
    border: none;
    /* 可选：如果需要的话，设置边框样式（如圆角边框） */
    border-radius: 5px;
    /* 圆角边框 */

    /* 字体变大 */
    font-size: 16px;
    /* 根据需要调整 */

    /* 字体变好看 */
    font-family: Arial, sans-serif;
    /* 选择一个常见的、易读的字体 */
    font-weight: bold;
    /* 使字体变粗 */

    /* 其他样式，比如背景色、内边距等 */
    background-color: #ffffff;
    /* 浅灰色背景 */
    padding: 10px;
    /* 增加内边距 */
    color: #333;
    /* 字体颜色 */

    /* 可选：为了美观，去除聚焦时的默认边框 */
    outline: none;

    /* 可选：为了保持可访问性，聚焦时通过其他方式表示（例如，改变背景色） */
    &:focus {
        background-color: #ddd;
        /* 聚焦时背景色变深 */
    }
}
</style>
